<template>
  <div>
    <form action="/">
  <van-search
    v-model="value"
   class="banner-search"
    placeholder="请输入搜索关键词"
    @search="onSearch"
  />
  <div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
  <van-icon class="banner-icon" name="photograph" />
</form>
<div>
    <van-cell class="history" title="搜索历史">
        <span>全部删除</span>
        &nbsp;
        <span>完成</span>
    <van-icon name="delete-o" class="delete" />
    </van-cell>
    <van-cell title="111" value="内容" size="large" />
</div>



  </div>
</template>

<script>
import { Search,Cell, CellGroup,Icon,NavBar } from 'vant';
console.log(Search);
console.log(Cell);
console.log(CellGroup);
console.log(Icon);
console.log(NavBar)


export default {
    components:{
        [Search.name]:Search,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Icon.name]:Icon,
        [NavBar.name]:NavBar
    },
    data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },

  },
}
</script>

<style  lang="less">
.banner-search {
  width: 320px;
  position: relative;
  right: -30px;
}
.back {
  position: absolute;
  margin-top: -35px;
  left: 10px;
}
.banner-icon {
  float: right;
  margin-top: -35px;
  right: 5px;
}
.history {
   height: 60px;

}
.delete {
    top: 20px;
    right: 20px;
}

</style>